<template>
    <div class="commentInput">
        <div class="commentWrap">
            <label for="username">username</label>
            <input type="text" id = 'username' class="form-control" v-model="username" placeholder="请输入用户名">
        </div>
        <div class="commentContent">
            <label for="content">content</label>
            <textarea type="text" id = 'content' class="form-control" v-model="content" placeholder="请输入评论内容"></textarea>
        </div>
        <div class="buttonWrap">
            <button class="btn btn-default" @click="addComment({username,content})">同步确定</button>
            <button class="btn btn-default" @click="addCommentAsync({username,content})">异步确定</button>
        </div>
    </div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
    name: 'comment-input',
    data () {
        return {
            username: '',
            content: '',
        };
    },
    methods: {
        addComment ({username,content}) {
            this.$store.dispatch('addComment', {username,content})
        },
        addCommentAsync ({username,content}) {
            this.$store.dispatch('addCommentAsync', {username,content})
        }
    }
};
</script>
<style scoped>
    .buttonWrap{
        margin-top: 10px;
    }
    #username,
    #content{
        width: 95%;
        margin: 0 auto;
    }
    .commentWrap{
        margin-top: 15px;
    }
</style>